<template>
  <div class="login-wrapper">
    <div class="flexbox-wrapper">
      <div class="flexbox">
        <div class="flexbox-item" >
        <h3 class="heading3">代理中心备用入口</h3>
      </div>
      <div class="flexbox-item" >
        <x-input id="username" :title="areaName + 'ID'" v-model="kkk" required show-clear :placeholder="'请输入'+ areaName + 'ID'" :on-click-clear-icon="kkk = ''"></x-input>

      </div>
      <div class="flexbox-item" >
        <x-input id="password" title="密码" v-model="password" type="password" show-clear required placeholder="请输入密码" :on-click-clear-icon="password = ''"></x-input>
      </div>
      <div class="flexbox-item" >
        <x-button type="primary"  @click.native="login">登录</x-button>
      </div>
    </div>
    </div>
      <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
        <p style="color:#fff;text-align:center;" @click.native="showDialogStyle = false">

          <div class="card">
            <span style="font-size:24px;">提示</span>
            <span>{{dialogText}}</span>

          </div>
          <br>
          <x-icon  @click.native="showDialogStyle = false" type="ios-close-outline" style="fill:#fff;"></x-icon>
        </p>
      </x-dialog>
  <img class="logo-img" src="../assets/shuaishuai-hy-text.png"/>
  </div>
</template>

<script>
import { md5, Flexbox, FlexboxItem, XInput , XButton, XDialog  } from 'vux'
import axios from 'axios'
import qs from 'qs'
export default {
  name: 'login',
  data () {
    return {
      kkk: '',
      password: '',
      showDialogStyle: false,
      dialogText: '',
      areaCode: '',
      areaName: '',
      areaList: {
        'hn_pj': '帅帅',
        'nd_hy': '九天',
        'll_hy': '亮亮'
      }
    }
  },
  mounted() {
    this.areaCode = qs.parse((window.location.href.split('?')[1]).split('#')[0]).areaCode;
    this.areaName = this.areaList[this.areaCode];
    if(!this.areaName) {
      this.areaName = '帅帅'
    }
    console.log(this.areaCode)

  },
  methods: {
   login() {
    let username = document.querySelector('#username input').value
    let password = document.querySelector('#password input').value
    if (username.length === 0) {
      this.dialogText = '请输入用户名'
      this.showDialogStyle = true
      return
    }
    if (password.length === 0) {
      this.dialogText = '请输入密码'
      this.showDialogStyle = true
      return
    }
    console.log(md5(password))
    let ac = this.areaCode
    
    axios({
      method: 'post',
      url: 'https://c-c-s.jiahuagame.com/game-lobby/agent/login/' + ac,
      data: {
        username: username,
        password: md5(password)
      }
    }).then(res=>{
      console.log(res)
      if (res.data.result == 0 ) {
        window.location.href = res.data.data
      } else {
      this.dialogText = res.data.message
      this.showDialogStyle = true
      }
    }).catch(err=>{
      console.error(err)
    })

   }

  },
  components: {
    Flexbox,
    FlexboxItem,
    XInput,
    XButton,
    XDialog
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.login-wrapper {
  height: 100%;
  background: url('../assets/app-bg.png');
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  position: relative;
}
.flexbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
}
.flexbox-item {
  width: 90%;
  margin: .6rem;
}
.flexbox-wrapper {
  height: 50%;
  display: flex;
  width: 90%;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
}
.heading3{
  font-weight: 400;
  text-align: center;
}
.card {
  width: 90%;
  height: 40%;
  background: white;
  border-radius: 6px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:  column;
  font-size: 1.2rem;
}
.logo-img {
  width: 7rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
</style>
